<template>
  <div class="home">
    <el-container>
      <el-header><Header /></el-header>
      <el-container>
        <el-aside
          :style="{ width: isShow.$state.isCollapse ? '56px' : '250px' }"
          ><Aside
        /></el-aside>
        <el-main
          ><breadcrumbVue></breadcrumbVue><RouterView></RouterView
        ></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Aside from "./components/Aside.vue";
import Header from "./components/Header.vue";
import { showMenu } from "@/store/showMenu";
import breadcrumbVue from "@/components/breadcrumb.vue";
const isShow = showMenu();
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  :deep(.el-header) {
    height: 70px;
    background-color: #409eff;
    box-sizing: border-box;
    padding: 0;
  }
  :deep(.el-aside),
  :deep(.el-main) {
    height: calc(100vh - 70px);
    // 控制容器的滚动条的样式
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  :deep(.el-aside) {
    background-color: #304156;
  }
  :deep(.el-menu) {
    border: 0;
  }
}
</style>
